<template>
	<view>
		<carHeader :title="'添加车辆'"></carHeader>
		<uni-card style="position: relative; top: -200rpx;">
			<view style="width: 90%;height: 360rpx;">
				<image style="width: 100%;height: 100%;" src="/static/车联网服务-08我的-05我的车辆添加_slices/组 4.png"></image>
			</view>
			<ul style="padding: 0;">
				<li>
					<text class="label-style">车辆类型</text>
					<uni-data-select v-model="value" :localdata="range" @change="change" style="font-size: 26rpx;padding-left: 10rpx;width:70%;height: 60rpx;"></uni-data-select>
				</li>
				<li>
					<text class="label-style">车辆型号</text>
					<!-- <view class="uni-input">
						<picker @change="bindPickerChange1" :value="index1" :range="array1">
							<view>{{array1[index1]}}</view>
						</picker>
					</view> -->
					<uni-data-select v-model="value1" :localdata="range1" @change="change1" style="font-size: 26rpx;padding-left: 10rpx;width:70%;height: 60rpx;"></uni-data-select>
				</li>
				<li>
					<text class="label-style">车辆号码</text>
					<input placeholder="请输入你的车牌号" class="input-style" />
				</li>
				<li>
					<text class="label-style">车主姓名</text>
					<input placeholder="请输入你的姓名" class="input-style" />
				</li>
				<li>
					<text class="label-style">电话号码</text>
					<input placeholder="请输入你的手机号" class="input-style" />
				</li>
				<li>
					<text class="label-style">照片</text>
					<uni-file-picker style="width: 100%;height: 100%;margin-left: 20rpx;"></uni-file-picker>
				</li>
			</ul>
		</uni-card>
		<view class="button-container">
			<button @click="add">+ 添加车辆</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				range: [{
						value: 0,
						text: "小客车"
					},
					{
						value: 1,
						text: "其他客车"
					},
					{
						value: 2,
						text: "微型货车"
					},
					{
						value: 3,
						text: "轻型货车"
					},
					{
						value: 4,
						text: "中型货车"
					},
					{
						value: 5,
						text: "重型货车"
					}],
					range1: [{
							value: 0,
							text: "大众"
						},
						{
							value: 1,
							text: "奔驰"
						},
						{
							value: 2,
							text: "宝马"
						},
						{
							value: 3,
							text: "东风"
						},
					],
			}
		},
		methods: {
			add() {
				uni.navigateTo({
					url: '/pages/tianjiachenggong/tianjiachenggong'
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为' + e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为' + e.detail.value)
				this.index1 = e.detail.value
			},
			change(e) {
				console.log("e:", e);
			},
			change1(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	li {
		list-style: none;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.uni-input {
		border: 2rpx solid gray;
		width: 65%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		font-size: 26rpx;
		padding-left: 30rpx;
		margin-left: 15rpx;
	}

	.button-container {
		position: absolute;
		bottom: 30rpx;
		width: 100%;

		button {
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			width: 80%;
			background-color: #3384FC;
			border-radius: 100rpx;
		}
	}

	.label-style {
		color: #fff;
		background-color: #3384FC;
		border-radius: 100rpx;
		width: 26%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.input-style {
		margin-left: 15rpx;
		font-size: 26rpx;
		padding-left: 30rpx;
		border-radius: 100rpx;
		border: 2rpx solid gray;
		width: 65%;
		height: 60rpx;
	}
</style>